<template>
  <div class="list-container">
    <el-row
      v-for="(item, index) in listData"
      :key="item.id"
      class="list-item"
      :class="{ selected: selectedIds.includes(item.id) }"
    >
      <!-- 列表内容 -->
      <el-col :span="24">
        <div class="list-content">
          <!-- 标题和序号 -->
          <div class="list-header">
            <!-- 多选框 -->
            <el-col :span="1" v-if="show_checkbox">
              <el-checkbox v-model="selectedIds" :label="item.id" @change="handleCheckboxChange" />
            </el-col>

            <span class="title-cn">{{ item.titleCn }}</span>
            <span class="title-en">{{ item.titleEn }}</span>
          </div>
          <div v-if="item.articleType === 'AncientBook'">
            <!-- 作者、期刊、出版年 -->
            <div class="list-body">
              <span class="author" v-html="item.author"></span>
              <span class="journal-name">{{ item.journaName }}</span>
            </div>
            <!-- 摘要 -->
            <div class="abstract" v-if="item.abstracts">
              <span class="abstract-text">
                <strong>摘要：</strong>
                {{ item.abstracts }}
              </span>
            </div>
          </div>

          <div v-if="item.articleType !== 'AncientBook'">
            <!-- 作者、期刊、出版年 -->
            <div class="list-body">
              <span class="author" v-html="item.author"></span>
              <span class="journal-name">{{ item.journaName }}</span>
              <span class="publish-year">{{ item.year }} 年 {{ item.number }} 期</span>
            </div>

            <!-- 摘要 -->
            <div class="abstract" v-if="item.abstracts">
              <span class="abstract-text">
                <strong>摘要：</strong>
                {{ item.abstracts }}
              </span>
            </div>

            <!-- 关键词 -->
            <div class="keywords" v-if="item.keyWords">
              <span class="keywords-text">
                <strong>关键词：</strong>
                {{ formatKeywords(item.keyWords) }}
              </span>
            </div>

            <div class="search-area">
              <strong>原文：</strong>
              <OriginalLink :titleCn="item.titleCn" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import OriginalLink from "./OriginalLink.vue";

const props = defineProps({
  listData: {
    type: Array as () => Array<{ id: number; [key: string]: any }>,
    default: () => [],
  },
  page_index: {
    type: Number,
    default: 1,
  },
  page_size: {
    type: Number,
    default: 20,
  },
  show_checkbox: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits<{
  (event: "selection-change", selection: Array<{ id: number; [key: string]: any }>): void;
}>();

// 选中的 id 列表
const selectedIds = ref<number[]>([]);

// 处理多选框变化
const handleCheckboxChange = () => {
  const selectedItems = props.listData.filter((item) => selectedIds.value.includes(item.id));
  emit("selection-change", selectedItems);
};

// 格式化关键词（将分号替换为空格）
const formatKeywords = (keywords: string) => {
  return keywords.replace(/;/g, " ");
};

// 设置选中的行数据
const setSelection = (selection: Array<{ id: number; [key: string]: any }>) => {
  selectedIds.value = selection.map((item) => item.id);
};

// 清空选中状态
const clearSelection = () => {
  selectedIds.value = [];
};

// 暴露方法给父组件
defineExpose({
  setSelection,
  clearSelection,
});
</script>

<style scoped>
/* 样式保持不变 */
</style>

<style scoped>
.list-container {
  width: 100%;
}

.list-item {
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

.list-content {
  display: flex;
  flex-direction: column;
}

.list-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.title-cn {
  font-weight: bold;
  margin-right: 12px;
}

.title-en {
  color: #888;
}

.list-body {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.author {
  margin-right: 12px;
}

.journal-name {
  margin-right: 12px;
}

.publish-year {
  margin-right: 12px;
}

.search-area,
.abstract,
.keywords {
  margin-top: 2px;
}

.abstract strong,
.keywords strong {
  font-weight: bold;
}

/* 摘要文本样式 */
.abstract-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
